<template>
  <div>
    <div class="m-filter-box"></div>
    <div class="m-page-box">
      <Table :columns="columns" :data="dataList"></Table>
      <div class="m-page-buttom">
        <Page
          :total="dataLen"
          :page-size="pageSize"
          :page-size-opts="[5, 10, 15]"
          :show-sizer="true"
          :loading="loading"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
        ></Page>
      </div>
    </div>

    <editUser :username="username" :showModal="editModal" @closeModal="showEdit = false" @reload="reload"></editUser>
    <!-- 编辑用户信息 -->
  </div>
</template>

<script>
import {mapActions} from 'vuex'
import {columns} from './js/columns'
import editUser from './handleUser/editUser.vue'

export default {
  inject: ['reload'],
  components: {
    'editUser': editUser,
  },
  data () {
    return {
      dataList: [],
      dataLen: 0,
      pageSize: 5,
      loading: false,
      columns: columns(this),
      showEdit: false,  // 修改用户
      username: '',   // 传递给Modal的username
    }
  },
  computed: {
    editModal () {
      return this.showEdit
    }
  },
  mounted () {
    this._getUserInfo()
  },
  methods: {
    // 切换页面
    changePage (page) {
      this._getUserInfo(page-1, this.pageSize)
    },
    // 切换页面数量
    changePageSize (pageSize) {
      this.pageSize = pageSize
      this._getUserInfo(0, pageSize)
    },
    // 修改用户信息
    editUser (row) {
      this.username = row.username
      this.showEdit = true
    },
    // 启用或禁用用户
    deleteUser (username) {
      const acitonUser = this.$store.state.userModule.user.username
      this._edituerstatus(acitonUser, username)
      this.reload()
    },
    // 获取用户信息
    async _getUserInfo (pageTemp, pageSizeTemp, userId) {
      const url = '/userinfo'
      const res = await this.GET_DATA({
        dataUrl: url,
        page: pageTemp,
        size: pageSizeTemp,
        userId: userId
      })
      if (res) {
        this.$nextTick(() => {
          this.dataList = res.data
          this.dataLen = res.data
        })
      }
    },
    // 修改用户状态接口
    async _edituerstatus (actionUser, username) {
      const url = '/edituerstatus'
      const res = await this.GET_DATA({
        dataUrl: url,
        actionUser: actionUser,  // 操作员
        username: username,   // 被修改状态的用户
      })
      if (res) {
        res.code === '0000' && this.$successMessage(res.message)
      }
    },
    ...mapActions({
      GET_DATA: '_GET_DATA'
    })
  }
}
</script>